<template>
  <div class="table-wrapper table-editor-wrapper">
    <Spin size="large"
          fix
          v-show="loading"></Spin>
    <table class="table table-editor"
           :class="tableClass">
      <thead>
        <tr>
          <th v-for="col in tableFields"
              :key="col.code">
            {{col.name}}
          </th>
          <th>
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-if="listData && listData.length">
          <RowEditor v-for="(row,index) in listData"
                     :key="row.id"
                     :data="row"
                     :fields="tableFields"
                     @delete="removeRow(index)"
                     @input="rowInput(index,$event)">
          </RowEditor>
        </template>
        <tr>
          <td colspan="999"
              class="add-line"
              @click="addOneRow">
            <Icon type="plus"></Icon>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import moduleStore from './store';
import $ from '@/common';

import baseGrid from '../gridTableSample';
import RowEditor from './editorRow';
export default {
	moduleStore,
	extends: baseGrid,
	watch: {
		data: {
			handler(v) {
				this.setData($.copyJson(this.data));
			},
		},
	},
	computed: {
		defualtRow() {
			return $.modelDefultData(this.model);
		},
		tableFields() {
			return this.tableModel.fields
				.filter(v => {
					return v.cardpos !== 0 && v.type !== 'pk';
				})
				.sort((a, b) => {
					return a.cardpos - b.cardpos;
				});
		},
	},
	created() {
		this.setData($.copyJson(this.data));
	},
	methods: {
		rowInput(index, { code, value }) {
			this.setRowField({ index, code, value });
		},
		addOneRow() {
			this.addRow({ ...this.defualtRow });
		},
	},
	components: {
		RowEditor,
	},
};
</script>
<style lang="less">
.table-wrapper.table-editor-wrapper {
	overflow-y: visible;
	overflow-x: auto;
}

table.table.table-editor {
	z-index: 2;
	height: auto;
	> tbody > tr > td {
		height: auto;
		padding: 1px;
		position: relative;
		border: 1px solid #e9eaec;
		.ivu-input,
		.ivu-select-selection {
			border-radius: 0;
			border-width: 0px;
		}
		&:last-child {
			border-right: 1px solid #e9eaec;
		}
	}
	.add-line {
		text-align: center;
		line-height: 32px;
		color: #2d8cf0;
	}
}
</style>
